<template>
	<view class="partyEntranceWp">
		<view class="titleWp">
			<view class="title">
				组局
			</view>
		</view>
		<view class="partyEntrance">
			<view class="listWp">
				<view class="itemWp">
					<view class="item" v-for="(item,index) in list" :key="index" @click="handlePartyItem(item)">
						<view class="imgWp">
							<u-image width="80rpx" height="80rpx" :src="item.icon"></u-image>
						</view>
						<view class="textWp">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="flexCenter">
				<view class="noticeWp" v-if="membersList && membersList.length>0" @click="handleNoticeBar">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard//6yqIujCb1M6R6699d515da2b13a04b3e3e6111105213_1681809445454.png">
					</u-image>
					<text style="margin:0 20rpx;"> {{formatBetween?formatBetween:''}}后</text>
					<text>1个组局待参加</text>
					<view class="avatarWp">
						<view class="avatarItemWp " v-for="(i,index) in membersList" :key="index">
							<u-image shape="circle" width="48rpx" height="48rpx" :src="i.photo"></u-image>
						</view>
					</view>
				</view>
			</view>

			<view class="btnWp" @click="goToNewParty">
				<view class="btn" hover-class="hoverClass">
					<u-icon name="plus" color="#fff" size="30"></u-icon>
					<text class="text">开新局</text>
				</view>
			</view>
		</view>

	</view>
</template>
<style lang="scss" scoped>
	.partyEntranceWp {
		background-color: #fff;

		.titleWp {
			padding: 24rpx 32rpx;
			height: 44rpx;
			line-height: 44rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;

		}

		.partyEntrance {
			overflow: hidden;

			.noticeWp {

				margin: 32rpx auto;
				height: 72rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 32rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #1D2129;
				line-height: 72rpx;

				.avatarWp {
					margin-left: 40rpx;
					display: flex;
					align-items: center;
					max-width: 220rpx;
					overflow: hidden;

					.avatarItemWp {
						display: flex;
						align-items: center;
						margin-left: -18rpx;

						&:nth-child(1) {
							margin-left: 0
						}
					}
				}

			}

			.btnWp {
				width: 400rpx;
				height: 88rpx;
				border: none;
				margin: 32rpx auto;

				.btn {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $u-primary;
					border-radius: 50rpx;

					.text {
						margin-left: 20upx;
						font-size: 30upx;
						font-weight: 400;
						height: 42rpx;
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 42rpx;
					}
				}
			}

			.listWp {
				.itemWp {
					box-sizing: border-box;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					width: 100%;

					.item {
						box-sizing: border-box;
						width: 20%;
						height: 170rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;



						.textWp {
							text-align: center;
							margin-top: 16rpx;
							height: 42rpx;
							line-height: 42rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #1D2129;
						}
					}
				}
			}
		}


	}
</style>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			membersList: {
				type: Array,
				default: () => []
			},
			formatBetween: {
				type: String
			},

		},

		methods: {
			goToNewParty() {
				this.$emit('goToNewParty')
			},
			handlePartyItem(item) {
				console.log(item);
				this.$emit('handlePartyItem', item)
			},
			handleNoticeBar() {
				this.$emit('handleNoticeBar')
			}

		}

	}
</script>